<template>
	<view class="container">
		<view class="wrap">
			<swiper class="swiper" circular :indicator-dots="carouselImage.length>1" :autoplay="true">
				<swiper-item v-for="(i,index) in carouselImage" :key="i.image" style="height: 130px;">
					<image lazy-load :lazy-load-margin="0" style="width: 100%;height: 130px;border-radius: 5px;"
						mode="scaleToFill" :src="setImgUrl(i.image)" @click="callPhone(i,index)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="main">
			<view class="side">
				<view :class="{'side-item':true,'curSide':activeKey===index}" v-for="(i,index) in sideItmeList"
					:key="index" @click="changeSideItem(index)">
					<view :class="{'side-item-l':true,'curSideL':activeKey===index}"></view>
					<view class="side-item-r">
						{{i.productName}}
					</view>
				</view>
			</view>
			<view class="main-company">
				<view class="company" v-for="(j,jIndex) in companysList" :key="jIndex" @touchend="jumpDetail(j,jIndex)">
					<img class="company-img" :src="setImgUrl(j.logo)" alt="" />
					<view class="company-name">
						{{j.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBusinessProductCompany,
		getUserExistCode,
		getBusinessCarousel
	} from '@/common/api.js'
	export default {
		data() {
			return {
				activeKey: 0,
				sideItmeList: [],
				companysList: [],
				authCode: '',
				isLogin: false,
				carouselImage: []
			}
		},
		onLoad() {
			this.isLogin = uni.getStorageSync('openId') ? true : false
			console.log(this.isLogin)
			if (!this.isLogin) {
				this.login()
			}
			this.getCompanys()
			this.getCarousel()
		},
		onPullDownRefresh() {
			this.getCompanys()
			setTimeout(() => {
				// 停止下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			/* 登录 */
			login() {
				// const accountInfo = uni.getAccountInfoSync()
				uni.login({
					// onlyAuthorize: true,
					provider: 'weixin',
					success: function(loginRes) {
						this.authCode = loginRes.code;
						console.log('loginRes', loginRes.code)
					}
				});
			},
			changeSideItem(event) {
				if (event === this.activeKey) return
				this.activeKey = event
				this.companysList = this.sideItmeList[this.activeKey].companys
			},
			/* 获取轮播 */
			async getCarousel() {
				const res = await getBusinessCarousel({
					type: 4
				})
				console.log(res)
				this.carouselImage = res
			},
			/* 获取公司数据接口 */
			async getCompanys() {
				const res = await getBusinessProductCompany()
				this.sideItmeList = res
				console.log(res)
				if (this.sideItmeList.length > 0) {
					this.companysList = this.sideItmeList[this.activeKey].companys
				}
			},
			setImgUrl(val) {
				return `${getApp().globalData.utils.imgUrl}${val}`
			},
			callPhone(val, index) {
				console.log(val)
				switch (val.effect) {
					case 0:
						break;
					case 1:
						tool.callPhone(val.effectContent)
						break;
					case 2:
						uni.navigateTo({
							url: `../home/addv?addvData=${JSON.stringify(val)}`
						});
						break;
				}
			},
			async jumpDetail(j, jIndex) {
				// return uni.navigateTo({
				// 	url: `../login/index`
				// });
				if (!this.isLogin) {
					console.log(this.authCode)
					const res = await getUserExistCode({
						code: this.authCode
					});
					if (res && res.openId) {
						getApp().globalData.sessionKey = res.sessionKey
						getApp().globalData.openId = res.openId
						console.log(res)
						if (!res.isLogined) {
							return uni.navigateTo({
								url: `../login/index`
							});
						} else {
							uni.setStorageSync('openId', res.openId)
						}
					}
				}
				uni.navigateTo({
					url: `../storeDetail/index?companyDetail=${JSON.stringify(j)}`
				});
			}
		},
		onShareAppMessage() {
			return {
				title: '钢价通',
				path: 'pages/store/index',
			}
		},
		onShareTimeline() {
			return {
				title: '钢价通',
				path: 'pages/store/index',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		font-size: 15px;
		font-weight: normal;

		.wrap {
			padding: 5px;
			height: 140px;
			border-radius: 8px;
			box-sizing: border-box;

			.swiper {
				height: 130px !important;
			}
		}

		.main {
			height: calc(100vh - 140px);
			box-sizing: border-box;
			// padding: 55px 0 80px;
			display: flex;

			.side {
				flex-basis: 100px;
				height: 100%;
				background-color: #ececec;
				box-sizing: border-box;
				padding: 5px 0;
				border-radius: 0 5px 5px 0;
				overflow-y: auto;

				&-item {
					width: 100px;
					height: 50px;
					display: flex;
					align-items: center;
					padding-left: 12px;
					box-sizing: border-box;

					&-l {
						width: 3px;
						height: 18px;
						border-radius: 3px;
						background-color: transparent;
						margin-right: 8px;
					}

					&-r {
						flex: 1;
					}

					.curSideL {
						background-color: #0749e4;
					}
				}

				.curSide {
					background-color: #fff;
					color: #0749e4;
					font-weight: bold;
				}
			}

			&-company {
				height: 100%;
				flex: 1;
				padding: 5px;
				display: flex;
				align-content: flex-start; 
				flex-wrap: wrap;
				box-sizing: border-box;
				overflow-y: auto;

				.company {
					font-size: 14px;
					margin: 0px 5px 5px;
					width: 78px;
					height: 125px;
					text-align: center;

					&-img {
						width: 78px;
						height: 78px;
						margin: 0 auto;
						border-radius: 5px;
						overflow: hidden;
					}

					&-name {
						text-align: center;
						color: #000000;
						font-size: 13px;
						margin-top: 5px;
					}
				}
			}
		}
	}
</style>